<script lang="ts" setup>
import { User, Lock } from '@element-plus/icons-vue'
// 引入库存
import { useLoginStore } from '@/stores/login/loginStore'
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";

const route = useRoute();
// 创建库存实例
const loginStore = useLoginStore();

const router = useRouter();
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

const ruleFormRef = ref<FormInstance>()


const validateUsername = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('用户名不能为空'))
    } else {
        callback()
    }
}
const validatePassword = (rule: any, value: any, callback: any) => {

    if (value === '') {
        callback(new Error('密码不能为空'))
    } else {
        callback()
    }
}

const loginForm = reactive({
    username: 'admin',
    password: 'admin',
})

const rules = reactive<FormRules<typeof loginForm>>({
    username: [{ validator: validateUsername, trigger: 'blur' }],
    password: [{ validator: validatePassword, trigger: 'blur' }],
})


const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

const loginSubmit = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid) => {
        if (valid) {
            // 调用登录接口
            try {
                ElMessage.success('登录成功');
                const redirectUrl = route.query.redirectUrl as string | undefined || '/';
                router.push(redirectUrl);
            } catch (error) {
                ElMessage.error(error.message);
            }
        } else {
            console.log('error submit!')
        }
    })
}

</script>

<template>
    <div class="form">
        <!-- 登录表单 -->
        <el-form ref="ruleFormRef" :model="loginForm" size="large" autocomplete="off" :rules="rules">
            <el-form-item>
                <h1 class="title">登录</h1>
            </el-form-item>
            <el-form-item prop="username">
                <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="loginForm.username" clearable
                    autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码"
                    v-model="loginForm.password" show-password clearable autocomplete="off">
                </el-input>
            </el-form-item>
            <el-form-item class="flex">
                <div class="flex">
                    <el-checkbox>记住我</el-checkbox>
                    <el-link type="primary" :underline="false">忘记密码？</el-link>
                </div>
            </el-form-item>
            <!-- 登录按钮 -->
            <el-form-item>
                <el-button class="button" type="primary" auto-insert-space
                    @click="loginSubmit(ruleFormRef)">登录</el-button> <br>
                <el-button class="button" @click="resetForm(ruleFormRef)">重置</el-button>

            </el-form-item>
            <el-form-item class="flex">
                <el-link type="info" :underline="false" @click="loginStore.toRegister()">
                    注册 →
                </el-link>
            </el-form-item>
        </el-form>
    </div>

</template>



<style lang="scss" scoped>
.form {
    background-color: rgba(255, 255, 255, 0.8);
    /* Form background semi-transparent */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    user-select: none;
    max-width: 400px;
    /* 限制表单的最大宽度 */
    margin: 0 auto;
    /* 居中表单 */

    .title {
        margin: 0 auto;
    }

    .button {
        width: 100%;
        margin: 2% 0;
    }

    .flex {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
}
</style>